<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>个人信息</title>
</head>
<body>
<div class="container">
    <div class="jumbotron">
        <h1 class="display-4">个人信息！</h1>
        <p class="lead">系统用户的个人信息详情，并附有信息修改功能。</p>
        <hr class="my-4">
        <div class="card">
            <div class="card-header">
                基本信息
            </div>
            <div class="card-body row">
                <div class="card col-3" style="padding-top: 1rem">
                    <img class="card-img-top rounded-circle mx-auto d-block img-thumbnail" src="images/right/avatar.png" style="width: 7rem; height: 7rem;" alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title text-center">浪迹</h5>
                        <hr>
                        <div class="text-center">
                            <div class="btn-group" role="group" aria-label="Basic example">
                                <button type="button" class="btn btn-danger btn-sm">
                                    系统 <span class="badge badge-light">9</span>
                                </button>
                                <button type="button" class="btn btn-secondary btn-sm">
                                    私信 <span class="badge badge-light">5</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card col-9">
                    <div class="card-body">
                        <h5 class="card-title">反馈中心</h5>
                        <p class="card-text">用户自己反馈的问题将集中展现于此处。</p>
                        <div class="card">
                            <div class="card-body row" style="padding: .1rem 1.15rem">
                                <div class="card col-3">
                                    <div class="card-body">
                                        <h5 class="card-title">问题</h5>
                                        <p class="card-text">数据处理功能还需完善。</p>
                                        <a href="#" class="card-link">删除</a>
                                    </div>
                                </div>
                                <div class="card col-3 ml-1">
                                    <div class="card-body">
                                        <h5 class="card-title">问题</h5>
                                        <p class="card-text">执行报告不够详细。</p>
                                        <a href="#" class="card-link">删除</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card my-4">
            <div class="card-header">
                资料修改
            </div>
            <div class="card-body">
                <h5 class="card-title">昵称修改</h5>
                <hr>
                <form>
                    <div class="form-group row">
                        <label for="oldAccount" class="col-2 col-form-label text-right">账号</label>
                        <div class="col-5">
                            <input type="text" readonly class="form-control-plaintext" id="oldAccount" value="18888888888">
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="oldNickname" class="col-2 col-form-label text-right">昵称</label>
                        <div class="col-5">
                            <input type="text" readonly class="form-control-plaintext" id="oldNickname" value="浪迹">
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="newNickname" class="col-2 col-form-label text-right">新昵称</label>
                        <div class="col-5">
                            <input type="password" class="form-control is-valid" id="newNickname"
                                   name="password" placeholder="新昵称" required>
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col-5 offset-2">
                            <button type="submit" class="btn btn-success">保存</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="card-body">
                <h5 class="card-title">密码修改</h5>
                <hr>
                <form>
                    <div class="form-group row">
                        <label for="oldPassword" class="col-2 col-form-label text-right">原密码</label>
                        <div class="col-5">
                            <input type="password" class="form-control is-valid" id="oldPassword"
                                   name="password" placeholder="原密码" required>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="newPassword" class="col-2 col-form-label text-right">新密码</label>
                        <div class="col-5">
                            <input type="password" class="form-control is-valid" id="newPassword"
                                   name="password" placeholder="原密码" required>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="confirmPassword" class="col-2 col-form-label text-right">确认密码</label>
                        <div class="col-5">
                            <input type="password" class="form-control is-valid" id="confirmPassword"
                                   name="password" placeholder="原密码" required>
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col-5 offset-2">
                            <button type="submit" class="btn btn-success">保存</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="card-body">
                <h5 class="card-title">绑定修改 <small>（您可以用绑定的手机、邮箱进行登录、找回密码等）</small></h5>
                <hr>
                <div class="form-group row">
                    <label for="oldPhone" class="col-2 col-form-label text-right">手机绑定</label>
                    <div class="col-5">
                        <input type="text" readonly class="form-control-plaintext" id="oldPhone" value="188****8888">
                    </div>
                    <button class="btn btn-danger">修改绑定</button>
                </div>

                <div class="form-group row">
                    <label for="oldEmail" class="col-2 col-form-label text-right">邮箱绑定</label>
                    <div class="col-5">
                        <input type="text" readonly class="form-control-plaintext" id="oldEmail" value="2015*******@stu.suda.edu.cn">
                    </div>
                    <button class="btn btn-danger">修改绑定</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>